const layer = layui.layer
// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.2 配置选项
let options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: ".preview",

};

// 1.3 创建裁剪区域
$image.cropper(options);

$('#btnChooseImage').on('click', function () {

    $('#file').click()
})


$('#file').on('change', function () {
    console.log(this.files[0])
    if (!this.files[0]) return
    const newSrc = URL.createObjectURL(this.files[0])
    console.log(newSrc);
    // 3. 更换剪裁区的图片的src属性
    $image.cropper('destroy').attr('src', newSrc).cropper(options);

})

$('#btnCreateAvatar').on('click', async function () {
    // 剪裁得到一张图片（canvas图片）
    let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    });

    // 把图片转成base64格式
    let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
    // console.log(dataURL)

    // json数据格式不是后端所需要的
    // base64字符串中包含特殊字符(=)，所以需要对其编码处理
    const res = await axios.post('/my/update/avatar', "avatar=" + encodeURIComponent(dataURL))
    console.log(res)
    if (res.data.status !== 0) return layer.msg(res.data.message)
    window.parent.getUserInfo()
    layer.msg(res.data.message)

})